import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'
import Counter from '../views/Counter.vue'
import AppHeader from '../components/AppHeader'
import Sider from '../components/Sider'

// 使用插件：必须要通过 Vue.use() 明确地安装路由功能
Vue.use(VueRouter)

// 定义路由
const routes = [
  {
    path: '/',
    redirect: '/home' // 重定向
  },
  {
    path: '/home', // 路径字符串
    name: 'Home', // 命名路由
    // component: Home // 待渲染的组件
    components: { // 命名视图渲染
      header: AppHeader,
      sider: Sider,
      default: Home
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/login',
    components: {
      header: AppHeader,
      default: Login
    }
  },
  {
    path: '/counter',
    component: Counter
  }
]

// 创建 VueRouter 实例
const router = new VueRouter({
  mode: 'hash', // 路由模式，可取 'hash'、'history'，默认为 'hash'
  base: process.env.BASE_URL, // 基准 URL
  routes // 路由配置，属性名固定为 routes
})

export default router
